<template>
	<div class="sqcomment">

		<div v-if="pageshow">
			<mt-loadmore :bottom-method="loadBottom" :bottom-all-loaded="loadShow" ref="loadmore" :auto-fill="false" :bottom-distance="50">
				<!--文字区域  -->
				<div class='body tbox'>
					<div class='title'>
						{{map.ATITLE}}
					</div>
					<div v-if="map.NAME" class="pers">发布人: {{map.NAME}}</div>
					<div class='fbsj'>
						<div class="sendperson">
							<div> 发布时间：{{map.FBSJ}}</div>
						</div>
						<div class="pl">
				        	<i class="iconfont icon-iconfontpinglun"></i>
				        	<span>{{plCount}}</span>
				        </div>
						<!--<span>共有<span class='num'>{{plCount}}条</span>评论</span>-->
					</div>
					<div class='js' v-if='map.ACONTENT != null'>
						<div v-html="map.ACONTENT"></div>
					</div>
					<div class='jsph' v-if="map.IMGS && map.IMGS.length > 0">
						<mt-swipe class='communityImg' :auto="0" :showIndicators="false">
							<mt-swipe-item v-for="(ite,idx) in map.IMGS" :key="idx">
								<div class="fph"><img class='banimg' :src="ite" /></div>
							</mt-swipe-item>
						</mt-swipe>
						<!--<div class="oneph" v-else>
								<img class='banimg' :src="map.IMGS[0]" />
							</div>-->
					</div>
				</div>

				<!--评论区  -->
				<div class="body">
					<div class='shequn_txt'>
						<div class='yhpl'>用户评论</div>
					</div>
					<ul class="plUl">
						<li class="backtxt clearfix" v-if="plList.length > 0" v-for="(item,index) in plList" :key="index">
            	<div class="pl_box clearfix">
								<!--左边头像  -->
								<!--<div class='backImgBox'>
										<div class='backtxtImg'>
											<img :src='item.USER.avatarUrl' />
										</div>
									</div>-->
								<!--右边的评论内容  -->
								<div class='backtxt_top'>
									<div class='username'>
										<!--用户名  -->
										<span>{{item.USERNAME}}</span>
										<!--显示时间  -->
										<div class='pl_time'>评论于：{{item.PLSJ}}</div>
									</div>
								</div>
								<span class='u_backtxt'>{{item.PLNR}}</span>
								<div @click='huifu(item.PLUSERID,item.USERNAME,item.ID)' class='lllsk'>
									<span>回复TA</span>
								</div>
							</div>
							<!--图片-->
							<div class="imgs" v-if="item.IMGSS">
								<div class="fph" v-for="(it,ix) in item.IMGSS" :key="ix">
									<img :src="it" alt="" />
								</div>
							</div>
							<!-- 回复的内容  -->
							<div class='punl' v-if="item.hflist && item.hflist.length > 0">
								<div class='punl_txt' v-for="(it,ix) in item.hflist" :key="ix">
									<div class="hftit">
										<span class='u_username'>{{it.UNAME}}</span>
										<span class='u_time'>{{it.UTIME}}</span>
									</div>
									<div class='u_txt'>{{it.PLNR}}</div>
								</div>
								<div class="seeAll" @click="seeMore(item.ID,item.PLUSERID,item.hflist,index)">
									<span>更多回复</span>
									<i class="iconfont icon-xia"></i>
								</div>
								<!--<div class="nosee" v-else>暂无更多回复...</div>-->
								<div class="sanjiao"></div>
							</div>
							<div class='ert'></div>
						</li>
						<li class="hasnopl" v-if="plList.length == 0">快来发表神评妙论吧...</li>
						<!--<li class="getmore" v-if="plList.length > 0 && !nosome" @click="getmorepl">加载更多评论</li>-->
					</ul>

				</div>
			</mt-loadmore>
			<div class="under_zw" style="background-color: #FFFFFF;"></div>
			<div class="comment-box" v-show="!popupVisible">
				<div class="cb_box">
					<input type='text' class="cb_in" :placeholder="plname" v-model='plval' />
					<div v-if="!ishf" class="selph" @click="showpopu">
						<i class="iconfont icon-jia"></i>
						<input type="file" accept="image/*" @change="imageFileChange" name="file" ref="inputer" />
					</div>
					<i class="iconfont icon-close close" v-else @click="close"></i>
					<div class='dzan'>
						<span v-if="map.DZS">{{map.DZS}}</span>
						<span v-else>0</span>
						<!--点赞  -->
						<div @click='clickgood(map.ID)'>
							<img src='../../assets/img/dz.png' />
						</div>
					</div>
					<div class="cb_btn" v-if="ishf" @click='send'>回复</div>
					<div class="cb_btn" v-else @click='send'>发表</div>
				</div>
			</div>
			<mt-popup v-model="popupVisible" position="bottom" class="popu">
				<div class="sendb">
					<div class="cb_box">
						<input type='text' class="cb_in" :placeholder="plname" v-model='plval' />
						<div class="selph">
							<i class="iconfont icon-jia"></i>
							<input type="file" accept="image/*" @change="imageFileChange" name="file" ref="inputer" />
						</div>
						<div class='dzan'>
							<span v-if="map.DZS">{{map.DZS}}</span>
							<span v-else>0</span>
							<!--点赞  -->
							<div @click='clickgood(map.ID)'>
								<img src='../../assets/img/dz.png' />
							</div>
						</div>
						<div class="cb_btn" @click='send'>发表</div>
					</div>
					<div class="cb_ph">
						<!--上传图片  -->
						<div class='hasPh' v-for="(item,index) in tempFilePaths" :key="index">
							<div class="phbox">
								<img :src="item" class="image" />
							</div>
							<div class='clear' @click='clearImg(index)'>×</div>
						</div>
					</div>
				</div>
			</mt-popup>
		</div>
		<div class="aloading" v-else>
			<mt-spinner type="triple-bounce"></mt-spinner>
		</div>

	</div>
</template>

<script>
import EXIF from "exif-js";
import api from "@/api/api";
import apiQues from "@/api/question";
import { MessageBox, Toast, Popup, Spinner, Loadmore } from "mint-ui";
import { mapActions } from "vuex";
export default {
  name: "Comment",
  data() {
    return {
      plname: "发表评论...",
      plval: "",
      maskShow: false,
      popupVisible: false,
      mcshow: true,
      tempFilePaths: [],
      hideAdd: true,
      number: 121,
      userid: "",
      map: {},
      plCount: 0,
      ishf: false,
      pageshow: false,
      hf2pl: "",
      plid: "",
      testph: [],
      plnum: 1,
      plrow: 4,
      hfnum: 1,
      hfrow: 3,
      forbid: false,
      htid: "",
      plList: [],
      nosome: false,
      nohf: false,
      topStatus: "",
      loadShow: false,
      file: "",
      arr: [],
      compressFrondImage: "", // 压缩之前的图片
      compressEndImage: "" // 压缩之后的图片
    };
  },
  methods: {
    ...mapActions({
      commit_title: "commit_title"
    }),
    loadBottom() {
      let that = this;
      let id = this.htid;
      let plnum = this.plnum;
      if (this.nosome) {
//      Toast({
//        message: "暂无更多评论",
//        duration: 1000
//      });
//      this.loadShow = true;
//      this.$refs.loadmore.onBottomLoaded();
//      return false;
      } else {
        plnum++;
        this.plnum = plnum;
      }
      this.selectPlforPage(id, plnum);
      setTimeout(function() {
        that.$refs.loadmore.onBottomLoaded();
      }, 1000);
    },
    // 更多回复
    seeMore(plid, pluserid, olist, index) {
      let that = this;
      let nowList = that.plList;
      let wid = that.htid;
      let hfrow = that.hfrow;
      let hfnum = that.hfnum;
//    if (that.nohf) {
//      return false;
//    } else {
//      hfnum++;
//      that.hfnum = hfnum;
//    }
		hfnum++;
        that.hfnum = hfnum;
      apiQues.selectHfforPage(that, wid, plid, pluserid, hfnum, hfrow, function(
        res
      ) {
        let ndata = JSON.parse(res.data.data);
        if (ndata.code === 1) {
          let nlist = ndata.list;
          var arr = [];
          if (nlist.length > 0) {
            for (let j = 0; j < nlist.length; j++) {
              let ntp = nlist[j].HFuserinfo.XF_TELEPHONE;
              nlist[j].UNAME = getName(ntp);
              nlist[j].UTIME = getTt(nlist[j].PLSJ.time);
            }
            arr = olist.concat(nlist);
          } else {
            arr = olist;
//          that.nohf = true;
			Toast({
	          message: "暂无更多回复",
	          duration: 1000
	        });
	        that.hfnum = hfnum - 1;
          }
          nowList[index].hflist = arr;
        }
        that.plList = [];
        that.plList = nowList;

        function getName(obj) {
          return obj.substring(0, 3) + "..." + obj.substring(7);
        }
        function getTt(timestamp) {
          var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
          var Y = date.getFullYear() + "-";
          var M =
            (date.getMonth() + 1 < 10
              ? "0" + (date.getMonth() + 1)
              : date.getMonth() + 1) + "-";
          var D =
            (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " ";
          return Y + M + D;
        }
      });
    },
    showpopu() {
      this.popupVisible = true;
    },
    clearImg(index) {
      this.tempFilePaths.splice(index, 1);
      var arr = this.tempFilePaths;
      this.tempFilePaths = arr;
      // 对应删除
      this.testph.splice(index, 1);
      var arr2 = this.testph;
      this.testph = arr2;
    },
    // 选择图片
    handleFileChange(e) {
      let that = this;
      let afile = e.target.files[0];
      if (this.testph.length >= 6) {
        Toast({
          message: "您上传的图片已经够多了",
          duraiton: 1500,
          className: "myTisMask"
        });
        return;
      }
      let reader = new FileReader();
      new Promise((resolve, reject) => {
        reader.readAsDataURL(afile);
        reader.onload = function(e) {
          resolve(e);
        };
      }).then(e => {
        that.tempFilePaths.push(e.target.result);
        that.testph.push(afile);
      });
    },
    // 获取评论
    selectPlforPage(wzid, num) {
      let that = this;
      //				let plnum = this.plnum;
      let plrow = this.plrow;
      apiQues.selectPlforPage(this, wzid, num, plrow, function(res) {
        let data = JSON.parse(res.data.data);
        if (data.code === 1) {
          console.log("评论");
          console.log(data);
          let list = data.list;
          let olist = that.plList;
          // 评论
			if (data.plCount >= 1000) {
				data.plCount = (data.plCount / 1000).toFixed(1) + 'K';
			}
          that.plCount = data.plCount;
          if (list.length > 0) {
            for (let i = 0; i < list.length; i++) {
              // 图片
              if (list[i].PLTP.length > 0) {
                list[i].IMGSS = list[i].PLTP.map(x => {
                  return that.host.filehost + x.ID;
                });
              }
              // 名称
              let tp = list[i].userinfo.XF_TELEPHONE;
              list[i].USERNAME = getName(tp);
              getHf(wzid, list[i].ID, list[i].PLUSERID)
                .then(e => {
                  list[i].hflist = JSON.parse(e);
                  that.plList = olist.concat(list);
                  if (i === list.length - 1) {
                  	that.pageshow = true;
                  }
                })
                .catch(err => {
                  console.log(err);
                });
            }
          } else {
            that.forbid = true;
            that.plList = olist;
            // 没有更多
            that.nosome = true;
            if (num !== 1) {
            	Toast({
	              message: "暂无更多评论",
	              duration: 1500
	            });
            }
            that.pageshow = true;
         }

          function getHf(wid, plid, pluserid) {
            let hfnum = that.hfnum;
            let hfrow = that.hfrow;
            var p = new Promise(function(resolve, reject) {
              apiQues.selectHfforPage(
                that,
                wid,
                plid,
                pluserid,
                hfnum,
                hfrow,
                function(res) {
                  let ndata = JSON.parse(res.data.data);
                  console.log("-*-*-*-");
                  console.log(ndata);
                  if (ndata.code === 1) {
                    let nlist = ndata.list;
                    if (nlist && nlist.length) {
                      for (let j = 0; j < nlist.length; j++) {
                        let ntp = nlist[j].HFuserinfo.XF_TELEPHONE;
                        nlist[j].UNAME = getName(ntp);
                        nlist[j].UTIME = getTt(nlist[j].PLSJ.time);
                      }
                    }
                    nlist = JSON.stringify(nlist);
                    resolve(nlist);
                  }
                }
              );
            });
            return p;
          }
          function getTt(timestamp) {
            var date = new Date(timestamp); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + "-";
            var M =
              (date.getMonth() + 1 < 10
                ? "0" + (date.getMonth() + 1)
                : date.getMonth() + 1) + "-";
            var D =
              (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) +
              " ";
            return Y + M + D;
          }
          function getName(obj) {
            return obj.substring(0, 3) + "..." + obj.substring(7);
          }
        }
      });
    },
    // 获取回复
    selectHfforPage(wzid, plid, pluserid) {
      let that = this;
      let hfnum = this.hfnum;
      let hfrow = this.hfrow;
      apiQues.selectHfforPage(
        this,
        wzid,
        plid,
        pluserid,
        hfnum,
        hfrow,
        function(res) {
          console.log("回复");
          console.log(res);
          let data = JSON.parse(res.data.data);
          if (data.code === 1) {
            let list = data.list;
            if (list.length > 0) {
            }
          }
        }
      );
    },
    // 动态详情
    getList(id) {
      let that = this;
      apiQues.selectArticleById(this, id, function(res) {
        console.log("详情");
        let data = JSON.parse(res.data.data);
        console.log(data)
        if (data.code === 1) {
          data.map.IMGS = data.map.AIMG.map(x => {
            return that.host.filehost + x.ID;
          });
          // 点赞
			if (data.map.DZS >= 1000) {
				data.map.DZS = (data.map.DZS / 1000).toFixed(1) + 'K';
			}
          that.map = data.map;
        }
      });
    },
    // 发表
    send() {
      let that = this;
      let ishf = this.ishf;
      let wzid = this.map.ID;
      let pluserid = this.userid;
      let plnr = this.plval;
      let pllx = 0;
      let hfuserid = this.userid; //"0301007424"
      let htid = this.htid;
      let plid = "";
      let fjarr = this.testph;
      if (plnr === "") {
        Toast({
          message: "请输入您的看法",
          duration: 1500,
          className: "myTisMask"
        });
        return false;
      }
      if (ishf) {
        pllx = 1;
        pluserid = that.hf2pl;
        plid = that.plid;
        hfuserid = hfuserid;
      } else {
        pllx = 0;
        hfuserid = "";
        plid = "";
      }
      apiQues.insertPlComment(
        this,
        wzid,
        pluserid,
        plnr,
        pllx,
        hfuserid,
        plid,
        function(res) {
          console.log("发表or回复");
          console.log(res);
          //					let data = JSON.parse(res.data.data);
          let data = res.data;
          if (data.code === 1) {
            let msg = "恭喜";
            if (ishf) {
              msg = "回复成功,请等待审核!";
              //							that.ishf = false;
              Toast({
                message: msg,
                duration: 1500,
                className: "myTisMask"
              });
              that.getList(htid);
              that.close();
            } else {
              msg = "发表成功,请等待审核!";
              let sid = data.id;
              if (fjarr.length > 0) {
                // 有图片
                let num = 0;
                uploadph();

                function uploadph() {
                  api.upload(
                    that,
                    fjarr[num],
                    pluserid,
                    sid,
                    "pl",
                    "8a81892665120bbf016512642b180010",
                    function(res) {
                      let data = res.data;
                      if (data.code === 0) {
                        num++;
                        if (num === fjarr.length) {
                          Toast({
                            message: "发表成功,请等待审核",
                            duraion: 1500,
                            className: "myTisMask"
                          });
                          that.testph = [];
                          that.tempFilePaths = [];
                          that.plval = "";
                          that.popupVisible = false;
                          return;
                        }
                        uploadph();
                      } else {
                        Toast({
                          message: "图片上传失败",
                          duraion: 1000,
                          className: "myTisMask"
                        });
                      }
                    }
                  );
                }
              } else {
                Toast({
                  message: "发表成功,请等待审核",
                  duraion: 1500
                });
                that.plval = "";
              }
            }
          } else {
            Toast({
              message: data.msg,
              duration: 1500,
              className: "myTisMask"
            });
          }
        }
      );
    },
    // 点赞
    clickgood(wzid) {
      let that = this;
      let userid = that.userid;
      let id = that.htid;
      apiQues.insertDz(that, wzid, userid, function(res) {
        let data = JSON.parse(res.data.data);
        Toast({
          message: data.msg,
          duration: 1500,
          className: "myTisMask"
        });
        if (data.code === 1) {
          that.getList(id);
        }
      });
    },
    // 回复
    huifu(id, uname, plid) {
      this.plname = "回复" + uname;
      this.ishf = true;
      this.hf2pl = id;
      this.plid = plid;
    },
    popushow() {
      let plname = this.plname;
      if (plname === "发表评论...") {
        this.popupVisible = true;
      } else {
        this.mcshow = false;
        this.$refs.inBox.focus();
      }
    },
    // 评论回复
    //			insertPlComment() {
    //				apiQues.insertPlComment(this, wzid, pluserid, plnr, pllx, hfuserid, function (res) {
    //					console.log('评论')
    //					console.log(res)
    //				});
    //			},
    close() {
      this.plname = "发表评论...";
      this.ishf = false;
      this.plval = "";
    },
    clearImg(index) {
      let nArr = this.tempFilePaths;
      nArr.splice(index, 1);
      this.tempFilePaths = nArr;
      // 对应删除
      this.testph.splice(index, 1);
      var arr2 = this.testph;
      this.testph = arr2;
    },

    // 图片开始
    /**
     * 图片文件发生变化
     */
    imageFileChange(e) {
      this.file = e.target.files[0];
      if (this.file) {
        if (this.testph.length >= 6) {
          Toast({
            message: "您上传的图片已经够多了",
            duraiton: 1500
          });
          return;
        } else {
          let reader = new FileReader();
          reader.readAsDataURL(this.file);
          reader.onload = e => {
            console.log(e.target);
            this.compressFrondImage = e.target.result;
            this.compressImages(this.compressFrondImage);
          };
        }
      }
    },
    compressImages(res) {
      let defaultImage = {
        width: 1440,
        height: 1080,
        quality: 0.8, // 压缩图片的质量
        orientation: "" // 获取照片方向角属性，用户旋转控制
      };
      var img = new Image();
      img.src = res;
      let initSize = img.src.length;
      img.onload = () => {
        // 方便手机测试
        // alert("压缩之前宽度： " + img.width);
        // alert("压缩之前高度： " + img.height);
        // 方便浏览器测试
//      alert("压缩之前宽度： " + img.width);
        console.log("压缩之前高度： " + img.height);
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        if (img.width > defaultImage.width) {
          img.height = img.height * (defaultImage.width / img.width);
          img.width = defaultImage.width;
        }
        if (img.height > defaultImage.height) {
          img.width *= defaultImage.height / img.height;
          img.height = defaultImage.height;
        }
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        EXIF.getData(this.file, () => {
          // IMG_FILE为图像数据
          // 是否是iPhone手机，iPhone 拍照之后的压缩是逆时针旋转90，针对iphone做一下处理
          if (navigator.userAgent.match(/iphone/i)) {
            defaultImage.orientation = EXIF.getTag(this.file, "Orientation");
            // translate是平移变换，scale(-1,1)是向左翻转，rotate是顺时针旋转。
            // defaultImage.orientation = 6   // 测试iPhone手机
            // alert("Orientation:" + defaultImage.orientation); // 拍照方向
            switch (Number(defaultImage.orientation)) {
              case 2:
                ctx.translate(img.width, 0);
                ctx.scale(-1, 1);
                ctx.drawImage(img, 0, 0, img.width, img.height);
                break;
              case 3:
                ctx.rotate((180 * Math.PI) / 180);
                ctx.drawImage(
                  img,
                  -img.width,
                  -img.height,
                  img.width,
                  img.height
                );
                break;
              case 4:
                ctx.translate(img.width, 0);
                ctx.scale(-1, 1);
                ctx.rotate((180 * Math.PI) / 180);
                ctx.drawImage(
                  img,
                  -img.width,
                  -img.height,
                  img.width,
                  img.height
                );
                break;
              case 5:
                ctx.translate(img.width, 0);
                ctx.scale(-1, 1);
                ctx.rotate((90 * Math.PI) / 180);
                ctx.drawImage(img, 0, -img.width, img.height, img.width);
                break;
              case 6:
                canvas.width = img.height;
                canvas.height = img.width;
                ctx.rotate((90 * Math.PI) / 180);
                ctx.drawImage(img, 0, 0, img.width, -img.height);
                break;
              case 7:
                ctx.translate(img.width, 0);
                ctx.scale(-1, 1);
                ctx.rotate((270 * Math.PI) / 180);
                ctx.drawImage(img, -img.height, 0, img.height, img.width);
                break;
              case 8:
                ctx.rotate((270 * Math.PI) / 180);
                ctx.drawImage(img, -img.height, 0, img.height, img.width);
                break;
              default:
                ctx.drawImage(img, 0, 0, img.width, img.height);
            }
          } else {
            ctx.drawImage(img, 0, 0, img.width, img.height);
          }
          var imgUrl = canvas.toDataURL("image/jpeg", defaultImage.quality);
          // 手机端测试
          // alert(
          //   "压缩率：" + ~~(100 * (initSize - imgUrl.length) / initSize) + "%"
          // );
          // alert("压缩之后宽度： " + img.width);
          // alert("压缩之后高度： " + img.height);
          // 浏览器测试
          // console.log("压缩前：" + initSize);
          // console.log("压缩后：" + imgUrl.length);
          console.log(
            "压缩率：" + ~~((100 * (initSize - imgUrl.length)) / initSize) + "%"
          );
          // console.log("压缩之后宽度： " + img.width);
          // console.log("压缩之后高度： " + img.height);
          console.log("压缩之后base64地址");
//        alert(imgUrl);
          // 压缩之后的base64 图片地址
          this.compressEndImage = imgUrl;
          // that.testph.push(afile);
          this.tempFilePaths.push(imgUrl);
          // 开始base64转formdata格式上传  这个转化formdata有问题
          // function dataURLtoFile(dataurl, filename) {
          //   //将base64转换为文件
          //   var arr = dataurl.split(","),
          //     mime = arr[0].match(/:(.*?);/)[1],
          //     bstr = atob(arr[1]),
          //     n = bstr.length,
          //     u8arr = new Uint8Array(n);
          //   while (n--) {
          //     u8arr[n] = bstr.charCodeAt(n);
          //   }
          //   return new File([u8arr], filename, {
          //     type: mime
          //   });
          // }
          //var blob = dataURLtoFile(imgUrl, "img.jpg");
          function dataURItoBlob(base64Data) {
            var byteString;
            if (base64Data.split(",")[0].indexOf("base64") >= 0)
              byteString = atob(base64Data.split(",")[1]);
            else byteString = unescape(base64Data.split(",")[1]);
            var mimeString = base64Data
              .split(",")[0]
              .split(":")[1]
              .split(";")[0];
            var ia = new Uint8Array(byteString.length);
            for (var i = 0; i < byteString.length; i++) {
              ia[i] = byteString.charCodeAt(i);
            }
            return new Blob([ia], { type: mimeString });
          }
          var blob = dataURItoBlob(imgUrl); // base64 转formdata
          
          //结束base64转换

          this.testph.push(blob);

          // TODO 上传图片文件
          this.uploadImage();
        });
      };
    },
    /**
     * 上传图片
     */
    uploadImage: function() {},
    /**
     * 瓦片压缩 正在测试
     */
    imagesCompress: function(img) {
      // 用于压缩图片的canvas
      var canvas = document.createElement("canvas");
      var ctx = canvas.getContext("2d");
      // 瓦片canvas
      var tCanvas = document.createElement("canvas");
      var tctx = tCanvas.getContext("2d");

      var initSize = img.src.length;
      var width = img.width;
      var height = img.height;

      // 如果图片大于四百万像素，计算压缩比并将大小压至400万以下
      var ratio;
      if ((ratio = width * height / 4000000) > 1) {
        ratio = Math.sqrt(ratio);
        width /= ratio;
        height /= ratio;
      } else {
        ratio = 1;
      }

      canvas.width = width;
      canvas.height = height;

      // 铺底色
      ctx.fillStyle = "#fff";
      ctx.fillRect(0, 0, canvas.width, canvas.height);

      // 如果图片像素大于100万则使用瓦片绘制
      var count;
      if ((count = width * height / 1000000) > 1) {
        count = ~~(Math.sqrt(count) + 1); // 计算要分成多少块瓦片

        // 计算每块瓦片的宽和高
        var nw = ~~(width / count);
        var nh = ~~(height / count);

        tCanvas.width = nw;
        tCanvas.height = nh;

        for (var i = 0; i < count; i++) {
          for (var j = 0; j < count; j++) {
            tctx.drawImage(
              img,
              i * nw * ratio,
              j * nh * ratio,
              nw * ratio,
              nh * ratio,
              0,
              0,
              nw,
              nh
            );

            ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
          }
        }
      } else {
        ctx.drawImage(img, 0, 0, width, height);
      }

      // 进行最小压缩
      var ndata = canvas.toDataURL("image/jpeg", 0.8);

      console.log("压缩前：" + initSize);
      console.log("压缩后：" + ndata.length);
      console.log(
        "压缩率：" + ~~(100 * (initSize - ndata.length) / initSize) + "%"
      );

      tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
      return ndata;
    }
    // 图片结束
  },
  created() {
    let that = this;
    let id = this.$route.query.id;
    let userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
    if (userinfo == null || userinfo.vipcode === "") {
      // 未登录
      //			if (userinfo !== null && userinfo.vipcode !== "") {// 已登录
      MessageBox({
        title: "提示",
        message: "您还不是会员",
        showCancelButton: true,
        showCancelButton: false,
        confirmButtonText: "去注册",
        closeOnClickModal: false,
        confirmButtonClass: "zcbtn"
      }).then(action => {
        // 跳转到积分列表
        that.$router.push({
          path: "/register",
          query: {
            type: "qdpage"
          }
        });
      });
      return false;
    } else {
      this.userid = userinfo.vipcode;
      this.htid = id;
      let plnum = this.plnum;
      // 请求信息
      this.getList(id);
      // 评论
      this.selectPlforPage(id, plnum);
    }
//  setTimeout(function() {
//    that.pageshow = true;
//  }, 3000);
  }
};
</script>

<style lang="less">
.sqcomment {
  background-color: #f4f4f4;
  ul,
  li {
    list-style: none;
  }
  img {
    vertical-align: top;
  }
  .ert {
    border-bottom: 0.01rem dashed #F05DC4;
  }
  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  .body {
    padding: 0.2rem;
    box-sizing: border-box;
    position: relative;
    background-color: #ffffff;
    .hasnopl {
      text-align: center;
      line-height: 0.6rem;
      font-size: 0.32rem;
    }
    .plUl {
      border: 0.01rem solid #eeeeee;
      border-radius: 0.2rem;
      padding: 0.2rem;
      box-shadow: 0 0.05rem 0.1rem #eeeeee;
    }
  }
  .tbox {
    margin-bottom: 0.3rem;
  }
  .tbox .title {
    font-size: 0.4rem;
    font-weight: bold;
    margin-bottom: 0.2rem;
  }
  .tbox .js {
    padding: 0.2rem 0;
    font-size: 0.3rem;
    color: #666666;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .tbox .js img {
    width: 7rem;
    height: 4rem;
    margin-bottom: 0.1rem;
  }
  .fbsj {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 0.01rem solid #f4f4f4;
    padding: 0.2rem 0;
    padding-top: 0.06rem;
    color: #999999;
    .sendperson {
    	max-width: 5rem;
		div {
			line-height: 0.4rem;
			font-size: 0.28rem;
		}
		/*.pers {
			word-break:break-all;
		}*/
	}
	.pl {
		display: flex;
		align-items: center;
		font-size: 0.26rem;
		span {
			margin-left: 0.02rem;
		}
	}
  }
  .pers {
		color: #666;
		font-size: 0.28rem;
		line-height: 0.4rem;
		/*margin-top: 0.1rem;*/
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
  .fbsj span {
    font-size: 0.3rem;
  }
  .fbsj span .num {
    color: #f40;
  }
  .jsph {
    .oneph {
      /*padding-bottom:100%;
				position: relative;
				img {
					position:absolute;
					top:0;
					bottom:0;
					left:0;
					right:0;
					width:100%;
					margin:auto;
				}*/
    }
    .communityImg {
      width: 100%;
      height: 5rem;
      .fph {
        /*padding-bottom:100%;*/
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 5rem;
        overflow: hidden;
        img {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          width: 100%;
          margin: auto;
        }
      }
    }
  }
  .u_zan {
    position: absolute;
    margin-top: 0;
    font-size: 0.3rem;
    overflow: hidden;
    padding-left: 0.1rem;
    top: 0.01rem;
    right: -0.16rem;
    color: #f40;
  }
  .u_zan span {
  }
  .u_zan > div {
    float: right;
    margin-left: 0;
    margin-top: -0.12rem;
  }
  .u_zan img {
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.1rem;
    float: left;
    margin-top: 0.02rem;
  }
  .u_backtxt {
    font-size: 0.3rem;
    line-height: 0.4rem;
    width: 6rem;
    display: inline-block;
    margin-left: 0;
    word-break: break-all;
    white-space: pre-wrap;
    margin-top: 0.2rem;
    margin-bottom: 0.2rem;
  }
  .backTime span {
    font-size: 0.28rem;
    color: #ccc;
    margin-right: 0.1rem;
  }
  .u_huifu {
    font-size: 0.3rem;
    line-height: 0.48rem;
  }
  .u_look {
    font-size: 0.28rem;
    color: #ccc;
    margin-top: 0.3rem;
  }
  .backtxt {
    width: 100%;
    margin-bottom: 0.2rem;
    overflow: hidden;
    .pl_box {
      position: relative;
    }
    .imgs {
      padding-bottom: 0.1rem;
      display: flex;
			align-items: center;
			flex-wrap: wrap;
			justify-content: space-between;
      /*img {
					width: 1.6rem;
					height: 1.6rem;
					margin: 0.1rem;
				}*/
      .fph {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 3rem;
        height: 3rem;
				overflow: hidden;
				
        margin: 0.1rem;
        border: 0.01rem solid #efefef;
        img {
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          right: 0;
          width: 100%;
          margin: auto;
        }
      }
    }
  }
  .backImgBox {
    width: 0.8rem;
    float: left;
  }
  .backtxtImg {
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    margin-right: 0.2rem;
    margin-bottom: 0.1rem;
  }
  .backtxtImg img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }
  .backtxt_top {
    width: 4.4rem;
    float: left;
    /*padding: 0 0 0 0.2rem;*/
  }
  .username {
    width: 100%;
    height: 0.8rem;
    line-height: 0.8rem;
    position: relative;
    .pl_time {
      font-size: 0.28rem;
      color: #919598;
      position: absolute;
      top: 0.16rem;
      left: 0;
    }
  }
  .username span {
    font-size: 0.3rem;
    line-height: 0.4rem;
    display: inline-block;
    position: absolute;
    color: #F05DC4;
  }
  .shequn_txt {
    /*border-bottom: 0.02rem solid #e6e6e6;*/
    margin-bottom: 0.2rem;
    line-height: 0.66rem;
  }
  .yhpl {
    width: 100%;
    height: 0.5rem;
    font-size: 0.32rem;
    text-align: left;
    font-weight: bold;
    color: #333;
  }
  .lllsk {
    position: absolute;
    height: 0.5rem;
    right: 0;
    top: 0.16rem;
    font-size: 0.28rem;
  }
  .punl {
    background-color: #f7f5f9;
    padding: 0.2rem 0.3rem;
    box-sizing: border-box;
    margin-bottom: 0.3rem;
    border-radius: 0.14rem;
    /*border: 0.01rem solid #f2f2f2;*/
    position: relative;
    margin-top: 0.2rem;
    .punl_txt {
      border-bottom: 0.01rem dashed #cfcdcf;
      .hftit {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 0.5rem;
      }
      .u_txt {
        font-size: 0.28rem;
        line-height: 0.4rem;
        padding-bottom: 0.1rem;
      }
      .u_time {
        font-size: 0.26rem;
        line-height: 0.5rem;
        color: #999999;
      }
    }
    .seeAll {
      font-size: 0.28rem;
      line-height: 0.4rem;
      padding-top: 0.1rem;
      color: #F05DC4;
      text-align: center;
      i {
        font-size: 0.26rem;
      }
    }
    .nosee {
      font-size: 0.28rem;
      line-height: 0.4rem;
      padding-top: 0.1rem;
      color: #aaaaaa;
      text-align: center;
    }
    .sanjiao {
      position: absolute;
      width: 0;
      height: 0;
      border-width: 0.2rem;
      border-color: transparent;
      border-style: solid;
      border-bottom-color: #f7f5f9;
      top: -0.36rem;
      left: 0.2rem;
      z-index: 99;
    }
  }
  .punl .u_username {
    font-size: 0.28rem;
    line-height: 0.5rem;
    color: #F05DC4;
  }
  .comment-fixed {
    position: fixed;
    bottom: 0;
    left: 0;
    background-color: #f8f8f8;
    z-index: 100;
    .mc {
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 0.96rem;
      background-color: transparent;
      z-index: 9;
    }
  }
  .cf-bg {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: transparent;
    z-index: 99;
  }
  .t-info input {
    background: red;
    padding: 0.16rem 0.1rem;
    height: 0.6rem;
    box-sizing: border-box;
    width: 100%;
    display: block;
  }
  .cf-box {
    padding: 0.16rem 0.1rem;
    display: flex;
    justify-content: space-between;
    box-sizing: border-box;
  }
  .cf-content {
    background-color: #ffffff;
    font-size: 0.28rem;
    height: 0.6rem;
    max-height: 0.8rem;
    width: 100%;
    padding-left: 0.1rem;
    border: none;
    outline: none;
  }
  .cf-send {
    width: 20%;
    border-radius: 0.04rem;
    text-align: center;
    font-size: 0.28rem;
    background-color: #e64340;
    color: #fff;
    border: none;
    outline: none;
  }
  .cf-send.touch-active:active {
    background-color: #b03f3e;
  }
  .comment-box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #f8f8f8;
    .cb_box {
      background-color: #ffffff;
      margin: 0.16rem 0.1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      .cb_in {
        background-color: #ffffff;
        font-size: 0.28rem;
        height: 0.66rem;
        max-height: 0.8rem;
        width: 4rem;
        padding: 0 0.1rem;
        outline: none;
        border: none;
      }
      .selph {
        width: 0.46rem;
        height: 0.46rem;
        position: relative;
        overflow: hidden;
        input {
          opacity: 0;
          width: 100%;
          height: 100%;
          z-index: 99;
          position: absolute;
          left: 0;
          top: 0;
        }
      }
      i {
        font-size: 0.44rem;
        color: #cdcdcd;
      }
      .close {
        font-size: 0.3rem;
      }
      .cb_btn {
        width: 1.3rem;
        border-radius: 0.04rem;
        text-align: center;
        font-size: 0.3rem;
        background-color: #f05dc4;
        color: #fff;
        line-height: 0.66rem;
        border: none;
        outline: none;
      }
      .dzan {
        display: flex;
        align-items: center;
        span {
          font-size: 0.28rem;
          color: #f76c0f;
        }
        img {
          width: 0.5rem;
          height: 0.5rem;
        }
      }
    }
  }
  .popu {
    .sendb {
      width: 100vw;
      background-color: #f8f8f8;
      overflow: hidden;
      .cb_box {
        background-color: #ffffff;
        margin: 0.16rem 0.1rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        .cb_in {
          background-color: #ffffff;
          font-size: 0.28rem;
          height: 0.66rem;
          max-height: 0.8rem;
          width: 4rem;
          padding: 0 0.1rem;
          outline: none;
          border: none;
        }
        .selph {
          width: 0.46rem;
          height: 0.46rem;
          position: relative;
          overflow: hidden;
          input {
            opacity: 0;
            width: 100%;
            height: 100%;
            z-index: 99;
            position: absolute;
            left: 0;
            top: 0;
          }
        }
        i {
          font-size: 0.44rem;
          color: #cdcdcd;
        }
        .cb_btn {
          width: 1.3rem;
          border-radius: 0.04rem;
          text-align: center;
          font-size: 0.3rem;
          background-color: #f05dc4;
          color: #fff;
          line-height: 0.66rem;
          border: none;
          outline: none;
        }
        .dzan {
          display: flex;
          align-items: center;
          span {
            font-size: 0.28rem;
            color: #f76c0f;
          }
          img {
            width: 0.5rem;
            height: 0.5rem;
          }
        }
      }
      .cb_ph {
        /*padding: 0.1rem;
					padding: 0.16rem 0.1rem;
					  display: flex;
					  justify-content: space-between;
					  box-sizing: border-box;*/
        background-color: #ffffff;
        padding: 0.1rem;
        display: flex;
        flex-wrap: wrap;
        .phs {
          width: 1.6rem;
          height: 1.6rem;
          margin: 0.1rem;
          img {
            width: 1.6rem;
            height: 1.6rem;
          }
        }
        .hasPh {
          width: 1.6rem;
          height: 1.6rem;
          margin: 0.1rem;
          position: relative;
          .phbox {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 1.6rem;
            overflow: hidden;
            img {
              width: 100%;
              /*height: 1.6rem;*/
              height: auto;
            }
          }
        }
        .hasPh .clear {
          position: absolute;
          right: -0.1rem;
          top: -0.1rem;
          width: 0.3rem;
          height: 0.3rem;
          border-radius: 50%;
          background-color: #ccc;
          color: #fff;
          font-size: 0.3rem;
          text-align: center;
          line-height: 0.3rem;
        }
      }
    }
    .chooseImg {
      padding: 0 0.2rem;
      padding-bottom: 0.2rem;
    }
    .chooseImg .head {
      display: flex;
      justify-content: space-between;
      padding: 0.2rem 0;
    }
    .chooseImg .head span {
      font-size: 0.32rem;
    }
    .chooseImg .head div {
      font-size: 0.3rem;
      color: #ccc;
    }
    .page-body-info {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
    /*.hasPh {
				width: 2rem;
				height: 2rem;
				position: relative;
				margin-left: 0.2rem;
				margin-bottom: 0.2rem;
			}
			.hasPh .clear {
				position: absolute;
				right: -0.1rem;
				top: -0.1rem;
				width: 0.3rem;
				height: 0.3rem;
				border-radius: 50%;
				background-color: #ccc;
				color: #fff;
				font-size: 0.3rem;
				text-align: center;
				line-height: 0.3rem;
			}*/
    .chooseImg .chooseBtn {
      width: 2rem;
      height: 2rem;
      border: 0.02rem solid #ddd;
      position: relative;
      margin: 0 0.2rem;
    }
    .line-horizontal {
      width: 1.5rem;
      height: 0.04rem;
      background: #ddd;
      position: absolute;
      left: 0.25rem;
      top: 0.98rem;
    }
    .line-vertical {
      height: 1.5rem;
      width: 0.04rem;
      background: #ddd;
      position: absolute;
      top: 0.25rem;
      left: 0.98rem;
    }
  }
  .aloading {
    background-color: #ffffff;
    line-height: 0.6rem;
    font-size: 0.3rem;
    color: #333;
    display: flex;
    padding-top: 0.3rem;
    justify-content: center;
  }
  .aloading2 {
    background-color: #ffffff;
    line-height: 0.6rem;
    font-size: 0.3rem;
    color: #333;
    display: flex;
    padding-top: 0.1rem;
    justify-content: center;
  }
  .getmore {
    width: 2rem;
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
    background-color: #F05DC4;
    color: #ffffff;
    font-size: 0.3rem;
    margin: 0 auto;
  }
  .under_zw {
    height: 1rem;
    width: 100%;
  }
}
</style>